<template>
    <div class="login-container">
        <div class="login-box">
            <!-- 头像区域 -->
            <div class="avatar-box">
                <img class="avatar" src="../assets/logo.png" alt="Avatar" />
            </div>
            <!-- 表单区域 -->
            <div class="form-login">
                <!-- 登录名称 -->
                <div class="form-group">
                    <label for="username">登录名称：</label>
                    <input type="text" class="form-control" id="username" placeholder="请输入登录名称" autocomplete="off"
                        v-model.trim="username" />
                </div>
                <!-- 登录密码 -->
                <div class="form-group">
                    <label for="password">登录密码：</label>
                    <input type="password" class="form-control" id="password" placeholder="请输入登录密码"
                        v-model="password" />
                </div>
                <!-- 登录按钮 -->
                <div class="form-group">
                    <button type="button" class="btn" @click="login">登录</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
// 获取 Vue Router 实例
const router = useRouter();
const username = ref(''); // 用户名
const password = ref(''); // 密码

// 登录方法
const onLogin = () => {
  // 检查用户名和密码是否正确
  if (username.value === 'admin' && password.value === '123456') {
    // 登录成功，跳转到主页
    router.push('/home');
    // 存储模拟的 token 到 localStorage
    return localStorage.setItem('token', 'Bearer xxx');
  } else {
    // 登录失败，提示错误
    alert('用户名或密码输入错误');
    // 移除 token（如果之前有）
    localStorage.removeItem('token');
  }
};
</script>

